<template>
  <section class="organization_change_history_table">
    <el-table stripe
              align="center"
               row-key="id"
              :data="tableData"
              style="width: 100%">
      <el-table-column label="操作时间">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createByName" label="操作者"></el-table-column>
      <el-table-column prop="operateType" label="操作类型"></el-table-column>
      <el-table-column prop="organizationName" label="组织"></el-table-column>
      <el-table-column prop="detail" label="变更记录"></el-table-column>
    </el-table>
    <div class="organization_change_history_table__pagination" v-if="pagination">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagination.pageNum"
                     :page-sizes="[10,20,30]"
                     :page-size="pagination.size"
                     layout="prev, pager, next, sizes, jumper"
                     :background="true"
                     :total="pagination.total"></el-pagination>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "organizationChangeHistoryTable",
  data () {
    return {
      isSizeChange: false
    };
  },
  computed: {
    ...mapGetters({
      tableData: "organizationChangeHistory/tableData",
      tableParams: "organizationChangeHistory/tableParams",
      pagination: "organizationChangeHistory/pagination"
    })
  },
  methods: {
    ...mapActions({
      fetchTableData: "organizationChangeHistory/fetchTableData",
      }),
    async handleSizeChange (val) {
      this.isSizeChange = true
      await this.fetchTableData({
        ...this.tableParams,
        size: val,
        page: 1
      })
    },
    async handleCurrentChange (val) {
      if (this.isSizeChange) {
        this.isSizeChange = false
        return
      }
      await this.fetchTableData({
        ...this.tableParams,
        page: val
      })
    }
  }
};
</script>
<style scoped>
.organization_change_history_table {
  margin: 16px 0;
}
.organization_change_history_table__pagination {
  margin: 16px 0;
  text-align: right;
}
</style>
